<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2.进行表单正则验证-button</title>
</head>
<body>
    <form action="#" method="get">
        <table border="1px" cellspacing="0" cellpadding="10px" align="center"> 
            <caption>登录界面</caption>
            <tr>
                <td>昵称</td>
                <td>
                    <input type="text" placeholder="请输入昵称" name="nickname" id="name">
                    <span class="nameMsg"></span>
                </td>
            </tr>
            <tr>
                <td>密码</td>
                <td>
                    <!-- onblur触发失去焦点关注事件 -->
                    <input type="password" placeholder="请输入密码" name="password" id="pwd" onblur="validatePwd()">
                    <span id="lower"></span><span id="middle"></span><span id="higher"></span>
                    <span class="pwdMsg"></span>
                </td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                    <!-- onclick触发点击事件 -->
                    <input type="button" value="登录" onclick="login()">&nbsp;&nbsp;
                    <input type="reset" value="重置">&nbsp;&nbsp;
                </td>
            </tr>
        </table>
    </form>
</body>
<script>
    //登录函数，直接通过提交表单
    function login(){
        //&  &&具备短路现象
        if(validateName() & validatePwd()){
            //提交表单
            document.forms[0].submit();
        }
    }

    //校验昵称是否为空，且正则校验要求不允许出现非法字符，并提示
    function validateName(){
        //获取昵称输入框中的值
        let name = document.getElementById("name").value;
        //获取提示的span元素标签
        let nameMsg = document.querySelector(".nameMsg");

        //正则表达式  允许昵称中出现中文、大小写字母、数字、_，但是不允许出现非法字符
        let reg = new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5]+$");

        if(name==null || name==''){
            nameMsg.innerHTML="<font style='color:red;font-size:12px;'>昵称不能为空</font>";
            return false;
        }else if(!reg.test(name)){
            nameMsg.innerHTML="<font style='color:red;font-size:12px;'>昵称不能包含非法字符</font>";
            return false;
        }else{
            nameMsg.innerHTML="<font style='color:green;font-size:12px;'>昵称通过</font>";
            return true;
        }
    }

    //校验密码是否为空，且进行正则校验要求强度校验，并提示
    function validatePwd(){
        let pwd = document.querySelector("#pwd").value;
        console.log(pwd);

        let pwdMsg = document.querySelector(".pwdMsg");
        let lower = document.querySelector("#lower");
        let middle = document.querySelector("#middle");
        let higher = document.querySelector("#higher");
        pwdMsg.innerText="";
        lower.innerText="";
        middle.innerText="";
        higher.innerText="";
        
        //正则表达式  密码进行强度校验
        if(pwd==null || pwd==''){
            pwdMsg.innerHTML="<font style='color:red;font-size:12px;'>密码不能为空</font>";
            return false;
        }else if(pwd.length<6){
            pwdMsg.innerHTML="<font style='color:red;font-size:12px;'>密码长度小于6</font>";
            return false;
        }else{
            /*
              1 ^...$  强制整个字符串匹配
              2 (?=.*[a-z0-9_]) 只允许字母/数字/下划线:  必须包含至少1个字母/下划线/数字(不区分大小写)  
              3 (?=.*[^a-z0-9_]) 或  (?=.*\W)：必须包含特殊字符（非字母/数字/下划线）
              4 \S{6,}：匹配 6+ 个非空字符（且不含空格）
            */
            let reg1 = /(?=.*[a-z_])(?=.*\d)(?=.*[^a-z0-9_])[\S]{6,}/i
            //let reg1 = /^(?=.*[a-z0-9_])(?=.*\W)\S{6,}$/i

            /*
               1 ^...$  强制整个字符串匹配
               2 (?=.*[a-z0-9_]) 只允许字母/数字/下划线:  必须包含至少1个字母/下划线/数字(不区分大小写) 
               3 [\w]   匹配字母/数字/下划线（相当于 [a-zA-Z0-9_]）
               4 {6,}   正确应用在字符匹配部分，要求总长度≥6
            */
            let reg2 = /^(?=.*[a-z0-9_])[\w]{6,}$/i

            //包含数字，长度大于6位
            let reg3 = /^[0-9]{6,}$/
            
            
            if(reg3.test(pwd)){
                lower.innerHTML="<font style='color:red;font-size:12px;'>弱</font>";
                pwdMsg.innerHTML="<font style='color:red;font-size:12px;'>密码不通过</font>";
                return false;
            }
            if(reg2.test(pwd)){
                lower.innerHTML="<font style='color:orange;font-size:12px;'>弱</font>";
                middle.innerHTML="<font style='color:orange;font-size:12px;'>中</font>";
                pwdMsg.innerHTML="<font style='color:green;font-size:12px;'>密码通过</font>";
                return true;
            }
            if(reg1.test(pwd)){
                lower.innerHTML="<font style='color:green;font-size:12px;'>弱</font>";
                middle.innerHTML="<font style='color:green;font-size:12px;'>中</font>";
                higher.innerHTML="<font style='color:green;font-size:12px;'>强</font>";
                pwdMsg.innerHTML="<font style='color:green;font-size:12px;'>密码通过</font>";
                return true;
            }
        }
    }

</script>
</html>